<template>
	<div >
		
		<div v-for=" infors in this.$store.state.restaurants ">
			<div v-for=" item in infors " :key = item.restaurant.authentic_id>
		
		<van-row type="flex" justify="space-between"  @click="resInfoPage(item)" >
		  <van-col span="5">
			  <van-image
			  width="80"
			  height="80"
			  :src="item.restaurant.image_path | iconFilter"
			/>
			</van-col>
		  <van-col span="18">
			  <van-row type="flex" justify="space-between">
			    <van-col span="21">
				<h3>{{ item.restaurant.name }}</h3>
			  	</van-col>
			    <van-col span="3">
			  	  <span class="col_r">...</span>
			    </van-col>
			  </van-row>
			  <van-row type="flex" justify="space-between">
			    <van-col span="24">
			  				<van-rate
							readonly
			  				  :value="item.restaurant.rating"
			  				  :size="15"
			  				  void-icon="star"
			  				  void-color="#eee"
			  				/><span class="col_l"> {{ item.restaurant.rating }}</span>&nbsp; <span class="col_r">月售{{ item.restaurant.recent_order_num }}单</span>
			  	</van-col>
			  </van-row>
			  <van-row type="flex" justify="space-between">
			    <van-col span="12" class="col_l">
				<span>¥{{ item.restaurant.piecewise_agent_fee.rules[0].price }}起送</span>|
				<span>配送费¥{{ item.restaurant.piecewise_agent_fee.rules[0].fee }}</span>
			  	</van-col>
				<van-col span="12" class="col_r">
				<span>{{ item.restaurant.distance | mTokm }}</span>|
				<span>{{ item.restaurant.order_lead_time }}分钟</span>
				</van-col>
			  </van-row>
		  </van-col>
		  
		</van-row>
		<!-- 活动 -->
		<van-row  type="flex" justify="end">
				  <van-col span="18" >
					  <van-row    type="flex" v-for="( active , i ) in item.restaurant.activities" :key="i">
					    
						<van-col span="18" v-show="i< flag " >	
					  	  <span :style="{'font-size': '.9rem' ,'background-color':'#'+active.icon_color,'color':'white','border-radius': '1.066667vw'}">{{active.icon_name}}</span> &nbsp; <span class="active_desc">{{active.description}}</span>
					    </van-col>
						<van-col span="6" v-if="i==0" >
						  <span class="col_r">{{item.restaurant.activities.length}}个活动 </span> <van-icon class="showAllActives" @click="showAllActives" name="arrow-down" />
						</van-col>
					  </van-row>
<!-- 					  <van-row  type="flex" >
					    <van-col span="24" >
					  	  <span>赠</span> &nbsp; <span>特价商品9.9元起</span>
					    </van-col>
					  </van-row>
					  <van-row  type="flex"  :style="moreActivesStyObj">
					    <van-col span="24" >
					  	  <span>赠</span> &nbsp; <span>特价商品9.9元起</span>
					    </van-col>
					  </van-row>
					  <van-row  type="flex" :style="moreActivesStyObj">
					    <van-col span="24" >
					  	  <span>赠</span> &nbsp; <span>特价商品9.9元起</span>
					    </van-col>
					  </van-row> -->
				  </van-col>
				</van-row>
				<van-divider />
				</div>
		
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	 export default {
		 props:{
			 
		 },   
		 created() {
			 //商家列表
			 // https://h5.ele.me/restapi/shopping/v3/restaurants?latitude=28.227779&longitude=112.938858&offset=0&limit=8&extras[]=activities&extras[]=tags&extra_filters=home&rank_id=&terminal=h5
		 	var position = this.$store.state.position
			var restaurantReqTimes = this.$store.state.restaurantReqTimes
			this.$store.dispatch("getResturantList",{position:position,times:restaurantReqTimes})
		 			.then(res =>{
		 				//饭店
		 				this.restaruantsInfo = res.data.items  //restaurants[]数组
						this.$store.state.restaurants.push(res.data.items)
		 				console.log(res.data.items);
		 			})
		 },
		 data(){
			 return {
				 restaruantsInfo:[],
				 moreActives:false,
				 rate:0,
				 flag:2
			 }
		 },
		 computed:{
			 moreActivesStyObj(){
				 return {
					 'display':this.moreActives?'block':'none'
				 }
			 }
		 },
		 methods:{
			 resInfoPage(item){
				 console.log(item);
				 this.$store.commit("setCurrentRes",item)
				 this.$router.push("/resDetail")
			 },
			 showAllActives(e){
				 console.log(e.target);
				 if(this.flag==2){
				 this.flag = 100
				 }else{
					 this.flag = 2
				 }
				 var el  = e.target
				if(this.moreActives ==false){
					el.style.transform = "rotate(180deg)"
					this.moreActives = true
				 }else{
				 el.style.transform = "rotate(0deg)"
				 this.moreActives = false
				 }
			 },
			processResturants(){
				var restaruantsInfo = []

				this.restaurants.forEach(item =>{
					  var restaurant = item.restaurant
					  //活动
					  var activities = restaurant.activities  //数组
					  //店铺图像
					  var image_path = processImgUrl(restaurant.image_path)
					  //店铺名称
					  var name = restaurant.name
					  //配置送时间
					  var order_lead = restaurant.order_lead_time
					  //店铺评分
					  var rating = restaurant.rating
					  //月销售
					  var recent_order_num = restaurant.recent_order_num
					  //配送费用
					  var fee = restaurant.piecewise_agent_fee.rules[0].fee
					  //多少起送
					  var price = restaurant.piecewise_agent_fee.rules[0].price
					  var  restaruantInfo = { activities,image_path ,name ,order_lead ,rating ,recent_order_num, fee, price }
					  restaruantsInfo.push(restaruantInfo)
				})
					  this.restaruantsInfo = restaruantsInfo
				// var restaurant = this.restaurants[0].restaurant
				//活动
				// var activities = restaurant.activities  //数组
				// var activitie0 = activities[0]
				// var activitie1 = activities[1]
				//活动一
				// var icon_color0 = activitie0.icon_color
				// var icon_name0 = activitie0.icon_name
				// var tips0 = activitie0.tips
				//活动2
				// var icon_color1 = activitie1.icon_color
				// var icon_name1 = activitie1.icon_name
				// var tips1 = activitie1.tips

				
			} 
		 }
	 }
</script>

<style>

	.col_l{
		color: #666;
		font-size: 12px;
	}
	.col_r{
		text-align: right;
		color: #666;
		font-size: 12px;
	}
	.showAllActives{
		transition: all .5s ease;
	}
	.active_desc{
		overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    display: inline-block;
		    width: 150px;
	}
/* 	.van-col{
		margin-bottom:7px ;
	} */
</style>
